﻿@model Admin.Models.ViewModel
<div class="container">
    <div id="rootwizard">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <ul>
                        <li><a href="#tab1" data-toggle="tab">Plugin Info</a></li>
                        <li><a href="#tab2" data-toggle="tab">Action Info</a></li>
                        <li><a href="#tab3" data-toggle="tab">Generate</a></li>
                        <li><a href="#tab4" data-toggle="tab">Deploy</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="bar" class="progress progress-striped active">
            <div class="progress-bar progress-bar-warning bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
            </div>
        </div>
        <div class="tab-content">
            <div class="tab-pane" id="tab1" data-name="pluigninfo">
                <div class="col-md-12">
                    <div class="widget wgreen">
                        <div class="widget-head">
                            <div class="pull-left">Plugin Information</div>
                            <div class="widget-icons pull-right">
                                <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
                                <a href="#" class="wclose"><i class="icon-remove"></i></a>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <div class="widget-content">
                            <div class="padd">
                                <h6>Captures details of the MVC application that will be deployed as a plugin</h6>
                                <hr>
                                <!-- Form starts.  -->
                                <form class="form-horizontal" role="form">

                                    <div class="form-group">
                                        <label class="col-lg-5 control-label">Plugin Name</label>
                                        <div class="col-lg-7">
                                            <input type="text" class="form-control" id="PluginName" placeholder="Alpabets Only">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-5 control-label">Plugin Description</label>
                                        <div class="col-lg-7">
                                            <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-5 control-label">Sharing</label>
                                        <div class="col-lg-7">
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
                                                    Shared across companies
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                                    Shared across pages
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                                                    Not shared
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-lg-5 control-label">Number Of Actions</label>
                                        <div class="col-lg-7">
                                            <select class="form-control">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-lg-5 control-label">Width in col</label>
                                        <div class="col-lg-7">
                                            <select multiple="" class="form-control">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="widget-foot">
                            <!-- Footer goes here -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="tab2" data-name="actioninfo">
                <div class="col-md-12">
                    <div class="widget wgreen" data-action="Mode">
                        <div class="widget-head">
                            <div class="pull-left"><input type="text" data-action="ModeName" value="Action Name"/></div>
                            <div class="widget-icons pull-right">
                                <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
                                <a href="#" class="wclose"><i class="icon-remove"></i></a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="widget-content">
                            <div class="padd">
                                @*<h6>Captures details of the Controller Actions</h6>
                                <hr>*@
                                <table class="table table-striped table-bordered table-hover" data-action="ModeProperties">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Argument Alias</th>
                                            <th>Type</th>
                                            <th>Value</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td data-action="index">1</td>
                                            <td><input type="text" data-action="PropertyName" /></td>
                                            <td><input type="text" data-action="Key"/></td>
                                            <td><input type="text" data-action="Value"/></td>
                                            <td>
                                                <button data-row="true" class="btn btn-xs btn-default"><i class="icon-ok"></i></button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="widget-foot">
                            <button data-action="AddMode" class="btn btn-xs btn-default"><i class="icon-plus"></i> Add New Action</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="tab3" data-name="generate">
                <div class="jumbotron">
                    <h1>Creating your plugin</h1>
                    <p>Description on how to use the plugin</p>
                </div>
            </div>
            <div class="tab-pane" id="tab4" data-name="deploy">
                <div class="jumbotron">
                    <h1>Deploy plugin</h1>
                    <p>Check list before you deploy</p>
                    <input type="file"  style="width:133px;"/>
                    <p><a class="btn btn-primary btn-lg" role="button">Upload</a></p>
                </div>
            </div>
            <ul class="pager wizard">
                <li class="previous first" style="display:none;"><a href="#">First</a></li>
                <li class="previous"><a href="#">Previous</a></li>
                <li class="next last" style="display:none;"><a href="#">Last</a></li>
                <li class="next"><a href="#">Next</a></li>
            </ul>
        </div>
    </div>
    <script>
        var plugin = JSON.parse('@Html.Raw(Model.PluginJson)');
    </script>
</div>